<template>
    <header-footer :commonData="{$parent:$parent}" v-if="showPage">
        <div class="crumb">
            <ul>
                <li class="f_left">当前位置：</li>
                <li class="f_left">
                    <router-link to="/index">首页></router-link>
                </li>
                <li class="f_left">实名认证</li>
            </ul>
        </div>
        <el-container class="authDia" style="height: 400px;padding: 0;width: 1200px;margin: 0 auto;min-height: 500px;margin-bottom: 50px;">
            <el-header style="height: 40px;line-height: 40px;text-align: center;font-size: 22px;">报名学习之前，请先进行实名认证</el-header>
            <el-main style="display: flex;justify-content:space-between;position: relative;padding: 0;">
                <div style="width: 50%;text-align: center;align-items: center;display: flex;">
                    <div style="width: 250px;text-align: left;margin: 0 auto;">
                        <div style="margin-top: 20px;">
                            <span class="height:17px;font-size:12px;font-weight:400;color:rgba(102,102,102,1);line-height:17px;">真实姓名</span>
                            <div style="margin-top: 2px;">
                                <input class="input" placeholder="请输入真实姓名" disabled v-model.trim="form.realName"/>
                            </div>
                        </div>
                        <div style="margin-top: 20px;">
                            <span style="height:17px;font-size:12px;font-weight:400;color:rgba(102,102,102,1);line-height:17px;">身份证号</span>
                            <div style="margin-top: 2px;">
                                <input class="input" placeholder="请输入身份证号" disabled v-model.trim="form.remark"/>
                            </div>
                        </div>
                        <div style="margin-top: 20px;">
                            <span class="height:17px;font-size:12px;font-weight:400;color:rgba(102,102,102,1);line-height:17px;">手机号</span>
                            <div style="margin-top: 2px;">
                                <input class="input" placeholder="请输入手机号" v-model.trim="form.telephone"/>
                            </div>
                        </div>
                        <div style="margin-top: 20px;">
                            <span class="height:17px;font-size:12px;font-weight:400;color:rgba(102,102,102,1);line-height:17px;">验证码</span>
                            <div style="margin-top: 2px;">
                                <input class="input" style="width: 100px;" placeholder="请输入验证码" v-model.trim="form.code"/>
                                <input readonly="readonly" :value="verifyCode" :disabled="disabled" style="width: 38%;cursor: pointer;text-align: center;border: 1px solid #0C67D0;padding: 5px 10px;border-radius: 6px;color: #0C67D0;background: #ffffff;outline: none;"
                                    @click="getVerifyCode" />
                            </div>
                        </div>
                    </div>
                </div>
                <div style="width: 50%;text-align: center;align-items: center;display: flex;">
                    <div style="width: 250px;text-align: left;margin: 0 auto;">
                        <div style="background:rgba(255,255,255,1);border-radius:4px;margin-top: 3px;margin-right: 20px;">
                            <span class="font-size:12px;color:rgba(102,102,102,1);line-height:17px;">上传身份证人面照片</span>
                            <el-upload action='' id="card" drag class="upload-demo" list-type="picture" :before-upload="onBeforeUpload"
                                :on-change="changeIdentity" :show-file-list="false">
                                <div v-if="String.isEmptyOrNUll(form.identity_base64)">
                                    <img src="/static/img/login/identity.png" style="width: 50px;height: 50px;margin-top: 30px;margin-bottom: 11px;" />
                                    <p style="font-size:14px;color:rgba(86,86,86,1);margin-bottom: 4px;">点击或将图片拖拽到这里上传</p>
                                    <p style="font-size:12px;color:rgba(0,0,0,0.45);">支持jpg和png格式</p>
                                </div>
                                <div v-else>
                                    <img :src="'data:image/png;base64,'+form.identity_base64" class="fill" />
                                </div>
                            </el-upload>
                        </div>
                        <div style="height:100px;background:rgba(255,255,255,1);border-radius:4px;margin-top: 3px;display: flex;justify-content: space-between;">
                            <div>
                                <div style="height:17px;font-size:12px;font-weight:400;ine-height:17px;color:rgba(102,102,102,1);margin-top: 24px;">上传1寸证件照</div>
                                <div style="height:20px;font-size:14px;font-weight:400;ine-height:20px;color:rgba(102,102,102,1);margin-top: 10px;">照片大小200k左右</div>
                                <div style="height:17px;font-size:12px;font-weight:400;ine-height:17px;color:rgba(102,102,102,1);">支持jpg和png格式</div>
                            </div>
                            <el-upload action='' id="photo" drag class="upload-demo" list-type="picture" :before-upload="onBeforeUpload"
                                :on-change="changePortrait" :show-file-list="false">
                                <img v-if="String.isEmptyOrNUll(form.portrait_base64)" src="/static/img/login/photo.png"
                                    style="width:30px;height:30px;margin-top: 50px;" />
                                <img v-else :src="'data:image/png;base64,'+ form.portrait_base64" class="fill" />
                            </el-upload>
                        </div>
                    </div>
                </div>
            </el-main>
            <el-footer class="text_center">
                <button class="realAuthBtn" @click="authSubmit">确认提交</button>
            </el-footer>
        </el-container>
    </header-footer>
</template>

<script>
    var _this;
    import headerFooter from '@/components/header_and_footer.vue'
    export default {
        name: "real_name_auth",
        data() {
            return {
                showPage: false,
                verifyCode: "获取验证码",
                disabled: false,
                form: {
                    realName: "",
                    remark: "",
                    telephone: "",
                    portrait_base64: "",
                    identity_base64: ""
                },
                toPage: this.$route.params.page
            }
        },
        beforeCreate: function() {
            _this = this;
        },
        mounted: function() {
            this.common.post(this.api.getMyInfo, {}, function(res) {
                _this.form = res.resultMap;
                if (res.ext == 302 || res.resultMap.isCheck == 0) {
                    _this.showPage = true;
                    return;
                }
                _this.common.toPage("/" + _this.toPage);
            });
        },
        methods: {
            onBeforeUpload: function(file) {
                var isIMAGE = ((file.type === 'image/jpeg') || (file.type === 'image/png') || (file.type ===
                    'image/bmp') || (file.type === 'image/jpg'));
                if (!isIMAGE) {
                    this.$message.error('上传文件只能是图片格式（jpeg/png/bmp/jpg）');
                    return false
                }
                if (file.size / 1024 > 200) {
                    this.$alert('图片不能大于200kb', '异常提示', {
                        confirmButtonText: '确定',
                        type: 'warning'
                    });
                    return false
                }
            },
            changeIdentity: function(file, fileList) {
                var reader = new FileReader();
                reader.readAsDataURL(file.raw);
                reader.onload = function(e) {
                    var index = this.result.indexOf('base64,'); //base64编码
                    if (index >= 0) {
                        var result = this.result.substring(index + 7);
                        _this.$set(_this.form, "identity_base64", result)
                    }
                }
            },
            changePortrait: function(file, fileList) {
                var reader = new FileReader();
                reader.readAsDataURL(file.raw);
                reader.onload = function(e) {
                    var index = this.result.indexOf('base64,'); //base64编码
                    if (index >= 0) {
                        var result = this.result.substring(index + 7);
                        _this.$set(_this.form, "portrait_base64", result)
                    }
                }
            },
            getVerifyCode: function() {
                if (this.form.telephone == "") {
                    this.$message.error('请输入手机号！');
                    return;
                }
                this.common.post(this.api.getVerifyCodeRegister, {
                    telephone: this.form.telephone
                }, function(data) {
                    _this.form.v_token = data.resultMap;
                    _this.setInter();
                }, function(error) {
                    _this.$message.error(error.resultMsg);
                });

            },
            setInter: function() {
                var countDown = 60;
                var timer = setInterval(function() {
                    countDown--;
                    _this.verifyCode = "已发送（" + countDown + "）";
                    _this.disabled = true;
                    if (countDown < 1) {
                        clearInterval(timer);
                        _this.verifyCode = "获取验证码";
                        _this.disabled = false;
                    }
                }, 1000);
            },
            authSubmit: function() {
                if (String.isEmptyOrNUll(this.form.telephone)) {
                    this.$message.error("请输入手机号码！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.code)) {
                    this.$message.error("请输入验证码！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.portrait_base64)) {
                    this.$message.error("请上传个人一寸照！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.identity_base64)) {
                    this.$message.error("请输入身份证正面照！");
                    return;
                }
                this.common.post(this.api.addUserInfo, {
                    v_token: this.form.v_token,
                    code: this.form.code,
                    telephone: this.form.telephone,
                    portrait_base64: this.form.portrait_base64,
                    identity_base64: this.form.identity_base64,
                }, function(res) {
                    _this.$message.success("实名认证成功！");
                    _this.common.toPage("/" + _this.toPage);
                }, function(err) {
                    // _this.form.portrait_base64 = "";
                    // _this.form.identity_base64 = "";
                    // _this.form.telephone = "";
                    // _this.users.telephone = "";
                    _this.$message.error(err.resultMsg);
                });
            }
        },
        components: {
            headerFooter: headerFooter
        }
    }
</script>

<style>
    .realAuthBtn {
        cursor: pointer;
        background: #0b67d0;
        color: #fff;
        border: none;
        outline: none;
        font-size: 16px;
        display: inline-block;
        width: 150px;
        height: 50px;
        line-height: 50px;
        border-radius: 4px;
        margin: 0 20px;
    }

    .fill {
        width: 100%;
        height: 100%;
    }

    #card .el-upload-dragger {
        width: 250px !important;
        height: 150px !important;
    }

    #photo .el-upload-dragger {
        width: 110px !important;
        height: 130px !important;
    }

    .authDia .input {
        width: 230px;
        height: 33px;
        background: rgba(237, 239, 244, 1);
        border-radius: 4px;
        border: 0;
        padding-left: 5px;
        padding-right: 5px;
    }

    .authDia .input:focus {
        outline: none;
    }
</style>
